<template>
	<view class="container">
		<u-sticky>
			<view class="tabs_box">
				<!-- 搜索栏优化：增加圆角、调整间距 -->
				<view class="tabs_box_search">
					<u-search :showAction="true" actionText="搜索" :animation="true" v-model="query.projectName"
						placeholder="请输入项目名称" @custom="getList(false)" @search="getList(false)" @clear="getList(false)"
						borderRadius="16rpx"></u-search>
				</view>
				<!-- 标签栏优化：增加下划线激活态、调整间距 -->
				<u-tabs :scrollable="false" keyName="dictLabel" :list="tabsList" @click="handleTabs"
					:current="currentIndex" barHeight="6rpx" barMarginBottom="20rpx"></u-tabs>
			</view>
		</u-sticky>

		<!-- 列表卡片优化：增加阴影、圆角、内边距 -->
		<view class="list_card" v-for="item in list" :key="item.taskId" @click="goDetails(item)">
			<view class="list_item">
				<view class="list_item_left">任务单号</view>
				<view class="list_item_right">{{item.taskNo}}</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">工号</view>
				<view class="list_item_right">{{item.productNo}}</view>
			</view>
			<!-- <view class="list_item">
				<view class="list_item_left">项目名称</view>
				<view class="list_item_right">{{item.projectName}}</view>
			</view> -->
			<view class="list_item">
				<view class="list_item_left">要求到厂时间</view>
				<view class="list_item_right">{{item.arrivalFactoryDate}}</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">要求完成时间</view>
				<view class="list_item_right">{{item.requireDate}}</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">安排日期</view>
				<view class="list_item_right">{{item.createTime}}</view>
			</view>
			<view class="list_item">
				<view class="list_item_left">安排人</view>
				<view class="list_item_right">{{item.createByName}}</view>
			</view>
			<!-- 按钮栏优化：居中显示、增加 hover 效果 -->
			<view class="list_btn" v-if="currentIndex === 0" @click.stop="">
				<u-button style="width: 160rpx;" type="primary" text="完成登记" hover-class="btn_hover"
					@click="handleBtn(item,'wcdj')"></u-button>
			</view>
		</view>

		<u-empty mode="list" style="padding-top: 100rpx;" text="暂无数据" v-if="!list.length">
		</u-empty>
	</view>
</template>

<script>
	import {
		getToDoTaskListPage
	} from "@/common/api.js"
	export default {
		data() {
			return {
				query: {
					__page: 1,
					__limit: 10,
					projectName: '',
					problemStatus: '3'
				},
				tabsList: [{
						dictLabel: '待办',
						dictValue: '3'
					},
					{
						dictLabel: '已办',
						// dictValue: '1,4,5,6,7'
						dictValue: '4'
					},
				],
				loading: false,
				total: 0,
				list: [],
				currentIndex: 0,
				userInfo: null,
				isLeader: 0,
				roleKeys: null
			}
		},

		onReachBottom() {
			if (this.query.__page * this.query.__limit < this.total) {
				this.loading = true
				this.$commonFn.debounce(this.getList, 500, true)
			} else {
				this.$commonFn.msg('已经到底了')
				this.loading = false
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			async getList(isRefresh = false) {
				this.loading = true
				if (isRefresh) {
					this.query.__page++
				} else {
					this.query.__page = 1
				}
				let res = await getToDoTaskListPage({
					...this.query,
				})
				if (res && res.data) {
					if (isRefresh) {
						this.list = this.list.concat(...res.data.list)
					} else {
						this.list = res.data.list
					}
					this.total = res.data.totalCount
					this.loading = false
				}
				this.loading = false
			},
			handleTabs(e) {
				this.currentIndex = e.index
				this.query.problemStatus = this.tabsList[this.currentIndex]['dictValue']
				this.getList()
			},
			handleConfirm(e) {
				this.getList()
			},
			handleBtn(item, type) {
				this.$commonFn.Navto(`./completeQuestion?taskId=${item.taskId}&type=1`)
			},
			goDetails(item) {
				this.$commonFn.Navto(`./completeQuestion?taskId=${item.taskId}&type=2`)
			}
		}
	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 32rpx;
		background-color: #f5f7fa; // 页面背景色，增强层次感
	}

	.tabs_box_search {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
	}

	// 列表卡片样式
	.list_card {
		margin: 32rpx;
		background-color: #fff;
		padding: 32rpx;
		border-radius: 12rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 卡片阴影
	}

	// 列表项样式
	.list_item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee; // 分隔线
		margin-bottom: 20rpx;

		&:last-child {
			padding-bottom: 0;
			border-bottom: none;
			margin-bottom: 0;
		}

		&_left {
			font-weight: 500;
			color: #666;
			flex-shrink: 0;
			padding-right: 26rpx;
		}

		&_right {
			color: #333;
		}
	}

	// 按钮样式
	.list_btn {
		display: flex;
		justify-content: center;
		margin-top: 32rpx;
	}

	// 按钮 hover 效果
	.btn_hover {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.2s ease;
	}

	// 覆盖 u-button 样式，保证宽度和高度一致性
	.list_btn ::v-deep .u-button {
		width: 160rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;
		border-radius: 8rpx;
	}
</style>